<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
  WorkbenchTrendItem,
} from '@vben/common-ui';
import {
  AnalysisChartCard,
  WorkbenchHeader,
  WorkbenchQuickNav,
  WorkbenchTodo,
} from '@vben/common-ui';

import {ref} from 'vue';
import {preferences} from '@vben/preferences';
import {useUserStore} from '@vben/stores';

import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';

const userStore = useUserStore();

const projectItems: WorkbenchProjectItem[] = [
  {
    color: '',
    content: '不要等待机会，而要创造机会。',
    date: '2021-04-01',
    group: '开源组',
    icon: 'carbon:logo-github',
    title: 'Github',
  },
  {
    color: '#3fb27f',
    content: '现在的你决定将来的你。',
    date: '2021-04-01',
    group: '算法组',
    icon: 'ion:logo-vue',
    title: 'Vue',
  },
  {
    color: '#e18525',
    content: '没有什么才能比努力更重要。',
    date: '2021-04-01',
    group: '上班摸鱼',
    icon: 'ion:logo-html5',
    title: 'Html5',
  },
  {
    color: '#bf0c2c',
    content: '热情和欲望可以突破一切难关。',
    date: '2021-04-01',
    group: 'UI',
    icon: 'ion:logo-angular',
    title: 'Angular',
  },
  {
    color: '#00d8ff',
    content: '健康的身体是实现目标的基石。',
    date: '2021-04-01',
    group: '技术牛',
    icon: 'bx:bxl-react',
    title: 'React',
  },
  {
    color: '#EBD94E',
    content: '路是走出来的，而不是空想出来的。',
    date: '2021-04-01',
    group: '架构组',
    icon: 'ion:logo-javascript',
    title: 'Js',
  },
];

const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:home-outline',
    title: '首页',
  },
  {
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
    title: '仪表盘',
  },
  {
    color: '#e18525',
    icon: 'ion:layers-outline',
    title: '组件',
  },
  {
    color: '#3fb27f',
    icon: 'ion:settings-outline',
    title: '系统管理',
  },
  {
    color: '#4daf1bc9',
    icon: 'ion:key-outline',
    title: '权限管理',
  },
  {
    color: '#00d8ff',
    icon: 'ion:bar-chart-outline',
    title: '图表',
  },
];

const todoItems = ref<WorkbenchTodoItem[]>([
  {
    "completed": false,
    "content": "执行OWASP ZAP扫描，修复检测到的3个中危漏洞（XSS/CSRF）",
    "date": "2024-09-05 16:00:00",
    "title": "安全渗透测试",
  },
  {
    "completed": false,
    "content": "将@vue/cli-service从4.5.13升级至5.0.8，解决npm audit报告的12个依赖漏洞",
    "date": "2024-08-22 11:15:00",
    "title": "脚手架版本升级",
  },
  {
    "completed": true,
    "content": "修复Safari浏览器下订单表格flex布局错位问题，添加跨浏览器测试用例",
    "date": "2024-04-18 15:20:00",
    "title": "Safari布局修复",
  },
  {
    "completed": false,
    "content": "重构用户认证模块，实现WebAuthn生物识别登录方案",
    "date": "2024-10-07 10:00:00",
    "title": "生物认证开发",
  },
  {
    "completed": true,
    "content": "实施A/B测试：对比新旧购物车转化率，数据埋点覆盖率提升至98%",
    "date": "2024-05-29 13:50:00",
    "title": "转化率实验",
  },
  {
    "completed": false,
    "content": "编写GraphQL API TypeScript类型声明文件，生成Swagger文档",
    "date": "2024-08-29 16:45:00",
    "title": "接口文档工程化",
  },
  {
    "completed": false,
    "content": "开发PWA离线模式，实现核心功能Service Worker缓存策略",
    "date": "2024-11-12 14:00:00",
    "title": "离线功能开发",
  }
]);
const trendItems: WorkbenchTrendItem[] = [
  {
    avatar: 'svg:avatar-1',
    content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
    date: '刚刚',
    title: '威廉',
  },
  {
    avatar: 'svg:avatar-2',
    content: `关注了 <a>威廉</a> `,
    date: '1个小时前',
    title: '艾文',
  },
  {
    avatar: 'svg:avatar-3',
    content: `发布了 <a>个人动态</a> `,
    date: '1天前',
    title: '克里斯',
  },
  {
    avatar: 'svg:avatar-4',
    content: `发表文章 <a>如何编写一个Vite插件</a> `,
    date: '2天前',
    title: 'Vben',
  },
  {
    avatar: 'svg:avatar-1',
    content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
    date: '3天前',
    title: '皮特',
  },
  {
    avatar: 'svg:avatar-2',
    content: `关闭了问题 <a>如何运行项目</a> `,
    date: '1周前',
    title: '杰克',
  },
  {
    avatar: 'svg:avatar-3',
    content: `发布了 <a>个人动态</a> `,
    date: '1周前',
    title: '威廉',
  },
  {
    avatar: 'svg:avatar-4',
    content: `推送了代码到 <a>Github</a>`,
    date: '2021-04-01 20:00',
    title: '威廉',
  },
  {
    avatar: 'svg:avatar-4',
    content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
    date: '2021-03-01 20:00',
    title: 'Vben',
  },
];
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
      </template>
      <template #description> 今日晴，20℃ - 32℃！</template>
    </WorkbenchHeader>

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="w-full lg:w-2.5/5">
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          title="快捷导航"/>
        <AnalysisChartCard class="mt-5" title="访问来源">
          <AnalyticsVisitsSource/>
        </AnalysisChartCard>
      </div>
      <div class="ml-4 w-full lg:w-2.5/5">
        <!--        <WorkbenchProject :items="projectItems" title="项目"/>-->
        <!--        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态"/>-->
        <WorkbenchTodo :items="todoItems" title="待办事项"/>
      </div>
    </div>
  </div>
</template>
